import React from "react"
import { ArrowLeft } from '@react-vant/icons'
import { useNavigate } from "react-router-dom"

import "./service.css"
function Service() {
    const navigate = useNavigate()

    const handleBack = () => {
        navigate(-1);
      };
    

    const ParkingIcon = () => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2c1.1 0 2 .9 2 2v2c0 1.1-.9 2-2 2h-2v2h4v2h-4c-1.1 0-2-.9-2-2v-6c0-1.1.9-2 2-2zm0 4h2v-2h-2v2z" />
        </svg>
    );

    const RoomIcon = () => (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
            <path d="M17 11V3H7v8H3v10h18V11h-4zm-8-6h2v4h-2V5zm-2 6h8v8h-2v-4h-4v4H7v-8z" />
        </svg>
    );


    const serviceItems = [
        {
            id: 1,
            title: '免费停车',
            icon: <ParkingIcon />,
            color: '#70a1ff',
            path: '/car'
        },
        {
            id: 2,
            title: '房间打扫',
            icon: <RoomIcon />,
            color: '#55efc4',
            path: '/clear'
        },
        {
            id: 3,
            title: '加床加被',
            icon: <svg t="1744271727176" className="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10830" width="26" height="26"><path d="M1221.680014 684.2368L1154.164281 418.929778a93.297778 93.297778 0 0 0-90.498845-70.269156h-6.235022V93.297778a93.297778 93.297778 0 0 0-93.297778-93.297778H264.05797a93.297778 93.297778 0 0 0-93.297778 93.297778v254.407111h-5.916444a93.297778 93.297778 0 0 0-90.498845 70.610489L2.187036 708.175644a69.131378 69.131378 0 0 0-2.184533 17.749334v186.595555a93.297778 93.297778 0 0 0 93.297778 93.297778h1041.908622a93.297778 93.297778 0 0 0 93.297778-93.297778v-173.238044a241.959822 241.959822 0 0 0-6.826667-55.045689zM329.366414 233.2672l214.584889-2.184533v111.047111h-213.014755l-1.570134-108.862578z m354.872889 0l214.289067-2.184533v111.047111H684.262059V233.244444zM232.951125 93.297778c0-17.2032 13.9264-31.106844 31.106845-31.106845H964.155392A31.106844 31.106844 0 0 1 995.262236 93.297778v248.832H959.14917v-111.047111a60.347733 60.347733 0 0 0-60.029156-60.029156H684.262059a60.347733 60.347733 0 0 0-62.190934 60.029156v111.047111h-16.1792v-111.047111a60.347733 60.347733 0 0 0-60.029155-60.029156H328.137614a60.347733 60.347733 0 0 0-58.800355 60.029156v111.047111h-36.386134V93.297778zM134.669881 433.220267c3.640889-14.108444 16.566044-23.779556 31.106844-23.324445h897.911467c14.5408-0.455111 27.465956 9.238756 31.084089 23.324445l67.492978 265.307022a5.279289 5.279289 0 0 0 0 2.161778H68.109881L134.669881 433.265778z m1000.561778 509.769955H93.300281a31.106844 31.106844 0 0 1-31.084089-31.106844v-148.980622h1104.099556v148.980622c0 17.180444-13.9264 31.106844-31.106845 31.106844z" fill="#ffffff" p-id="10831"></path></svg>,
            color: '#ffa502',
            path: '/add'
        }
    ];

    return (
        <React.Fragment>

            <div className="ljl-service-top">
                <div><ArrowLeft style={{ height: "14px", marginLeft: "0.3rem",paddingTop:"5px" }} onClick={handleBack}/></div>
                <div>综合服务</div>
            </div>
            <div className="ljl-service-bottom">
                <div className="ljl-service-bottom-box">

                    {serviceItems.map((item) => (
                        <div key={item.id} className="service-item" onClick={() => navigate(item.path)}>
                            <div className="service-icon" style={{ backgroundColor: item.color }}>
                                {item.icon}
                            </div>
                            <div className="service-title">{item.title}</div>
                            <div className="service-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ccc" width="24" height="24">
                                    <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
                                </svg>
                            </div>
                        </div>
                    ))}

                    {/* <div className="ljl-bottom-box-first">
                        <div></div>
                    </div>

                    <svg t="1744271727176" className="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10830" width="26" height="26"><path d="M1221.680014 684.2368L1154.164281 418.929778a93.297778 93.297778 0 0 0-90.498845-70.269156h-6.235022V93.297778a93.297778 93.297778 0 0 0-93.297778-93.297778H264.05797a93.297778 93.297778 0 0 0-93.297778 93.297778v254.407111h-5.916444a93.297778 93.297778 0 0 0-90.498845 70.610489L2.187036 708.175644a69.131378 69.131378 0 0 0-2.184533 17.749334v186.595555a93.297778 93.297778 0 0 0 93.297778 93.297778h1041.908622a93.297778 93.297778 0 0 0 93.297778-93.297778v-173.238044a241.959822 241.959822 0 0 0-6.826667-55.045689zM329.366414 233.2672l214.584889-2.184533v111.047111h-213.014755l-1.570134-108.862578z m354.872889 0l214.289067-2.184533v111.047111H684.262059V233.244444zM232.951125 93.297778c0-17.2032 13.9264-31.106844 31.106845-31.106845H964.155392A31.106844 31.106844 0 0 1 995.262236 93.297778v248.832H959.14917v-111.047111a60.347733 60.347733 0 0 0-60.029156-60.029156H684.262059a60.347733 60.347733 0 0 0-62.190934 60.029156v111.047111h-16.1792v-111.047111a60.347733 60.347733 0 0 0-60.029155-60.029156H328.137614a60.347733 60.347733 0 0 0-58.800355 60.029156v111.047111h-36.386134V93.297778zM134.669881 433.220267c3.640889-14.108444 16.566044-23.779556 31.106844-23.324445h897.911467c14.5408-0.455111 27.465956 9.238756 31.084089 23.324445l67.492978 265.307022a5.279289 5.279289 0 0 0 0 2.161778H68.109881L134.669881 433.265778z m1000.561778 509.769955H93.300281a31.106844 31.106844 0 0 1-31.084089-31.106844v-148.980622h1104.099556v148.980622c0 17.180444-13.9264 31.106844-31.106845 31.106844z" fill="#ffffff" p-id="10831"></path></svg> */}
                </div>
            </div>

        </React.Fragment>
    )
}

export default Service